<!--
 * @Author: ningjz
 * @Date: 2022-03-16 14:02:53
 * @Description: 商品价格对比-图表
-->
<template>
  <div class="nav">
    <div class="box-line echart-item">
      <charts class="line-chart" :params="lineState.params"></charts>
    </div>
    <div v-if="params.contrastType === '1'" class="box-bar echart-item">
      <charts class="line-chart" :params="BarState.params"></charts>
    </div>
    <div v-else class="box-pie echart-item">
      <charts class="line-chart" :params="PieState.params"></charts>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, watch } from 'vue'
import httpRequest from '@/service'
import * as echarts from 'echarts'
interface IState {
  isGroup?: boolean
  params: any
  getData: (params: any) => void
}
export default defineComponent({
  name: 'rightDb',
  props: {
    params: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  setup(porps) {
    //折线图
    const lineState: IState = reactive({
      isGroup: false,
      params: {
        loading: true,
        forceRedraw: true, // 强制重绘
        map: {},
        options: {
          dataset: {
            dimensions: [],
            source: []
          },
          title: {
            show: true,
            text: '',
            left: '20',
            top: '10',
            textStyle: {
              fontSize: 18,
              fontFamily: 'Microsoft YaHei',
              color: 'rgba(162, 199, 255,1)'
            }
          },
          legend: {
            right: 0,
            top: 15,
            width: '70%'
          },
          // 待完善：此处如果注释会导致添加不上axisLabel->fontSize的chartFontSize，因为递归合并时直接赋值xAxis全局配置了
          xAxis: [
            {
              axisLabel: {
                formatter: function (value: string) {
                  const srt = value.split('-')
                  return srt[1] + '-' + srt[2]
                }
              }
            }
          ],
          yAxis: [
            {
              name: ['', ''],
              position: ['left', ''],
              splitLine: {
                show: false
              }
            }
          ],
          grid: {
            top: 80,
            bottom: 10
          },
          // backgroundColor: '#082f7e',
          dataZoom: [
            {
              show: false,
              type: 'slider',
              start: 0,
              end: 100
            }
          ],
          series: [
            {
              type: ['line', 'line', 'line', 'line', 'line'],
              label: {
                show: false
              },
              symbolSize: 7, //折线点的大小
              smooth: true,
              connectNulls: true,
              itemStyle: {
                color: ['#5dec9d', '#ea68a2', '#1da7ff', '#ec6941', '#ffba0a']
              },
              areaStyle: {
                opacity: 0
              }
              // markPoint: {
              //   label: {
              //     show: true,
              //     color: '#fff'
              //   },
              //   data: [
              //     {
              //       type: 'max'
              //     },
              //     {
              //       type: 'min'
              //     },
              //     {
              //       type: 'average'
              //     }
              //   ]
              // }
            }
          ]
        },
        event: {
          customEvent: (chartInstance: echarts.ECharts) => {
            chartInstance.group = 'group1'
            lineState.isGroup = true
          }
        }
      },
      getData: (params) => {
        lineState.params.loading = true
        httpRequest
          .get({ url: 'M3P3SpdqDbLine', params })
          .then((res) => {
            if (res.code === 200 && Object.keys(res.map).length > 0) {
              lineState.params.map = res.map
              lineState.params.options.yAxis[0].min = res.min
              lineState.params.options.yAxis[0].name = [res.unit, '']
              lineState.params.options.dataset.dimensions = [
                'name',
                ...Object.keys(res.map)
              ]
              lineState.params.options.title.text = res.title
              lineState.params.options.dataset.source = res.data
              lineState.params.loading = false
            }
          })
          .catch(() => {
            console.log('请求失败')
          })
      }
    })
    //柱状图
    const BarState: IState = reactive({
      isGroup: false,
      params: {
        loading: true,
        forceRedraw: true, // 强制重绘
        map: {},
        options: {
          dataset: {
            dimensions: [],
            source: []
          },
          title: {
            show: true,
            text: '',
            left: '20',
            top: '2',
            textStyle: {
              fontSize: 18,
              fontFamily: 'Microsoft YaHei',
              color: 'rgba(162, 199, 255,1)'
            }
          },
          legend: {
            right: 0,
            top: 8,
            itemWidth: 15,
            width: '70%'
          },
          // 待完善：此处如果注释会导致添加不上axisLabel->fontSize的chartFontSize，因为递归合并时直接赋值xAxis全局配置了
          xAxis: [
            {
              axisLabel: {
                formatter: function (value: string) {
                  const srt = value.split('-')
                  return srt[1] + '-' + srt[2]
                }
              }
            }
          ],
          yAxis: [
            {
              splitLine: {
                show: false
              },
              name: ['']
            }
          ],
          grid: {
            top: 65,
            bottom: 32
          },
          dataZoom: [
            // {
            //   show: false,
            //   type: 'slider',
            //   start: 0,
            //   end: 100
            // }
            {
              show: true,
              type: 'slider',
              start: 0,
              end: 100,
              width: '80%',
              height: 15,
              left: '10%',
              bottom: '13',
              borderColor: '#166beb',
              handleStyle: {
                color: '#166beb',
                borderColor: '#166beb',
                borderWidth: 4
              },
              moveHandleSize: 10,
              moveHandleStyle: {
                color: '#166beb'
              },
              textStyle: {
                color: '#00c6ff'
              },
              emphasis: {
                handleStyle: {
                  color: '#00c6ff',
                  borderColor: '#00c6ff',
                  borderWidth: 4
                },
                moveHandleStyle: {
                  color: '#00c6ff'
                }
              }
            }
          ],
          series: [
            {
              type: ['bar', 'bar', 'bar', 'bar', 'bar'],
              label: {
                show: false
              },
              itemStyle: {
                color: ['#5dec9d', '#ea68a2', '#1da7ff', '#ec6941', '#ffba0a']
              },
              areaStyle: {
                opacity: 0
              }
            }
          ]
        },
        event: {
          // customEvent: (chartInstance: echarts.ECharts) => {
          //   chartInstance.group = 'group1'
          //   BarState.isGroup = true
          // }
        }
      },
      getData: (params: any) => {
        BarState.params.loading = true
        httpRequest
          .get({ url: 'M3P3SpdqDbBar', params })
          .then((res) => {
            if (res.code === 200 && Object.keys(res.map).length > 0) {
              BarState.params.options.dataset.dimensions = [
                'name',
                ...Object.keys(res.map)
              ]
              BarState.params.options.dataset.source = res.data
              BarState.params.options.yAxis[0].name = [res.unit]
              BarState.params.options.title.text = res.title
              BarState.params.map = res.map
              BarState.params.loading = false
            }
          })
          .catch(() => {
            console.log('请求失败')
          })
      }
    })
    // 多地区对比(代替之前饼图的位置)
    const PieState: IState = reactive({
      isGroup: false,
      params: {
        loading: true,
        forceRedraw: true, // 强制重绘
        map: {},
        options: {
          dataset: {
            dimensions: [],
            source: []
          },
          title: {
            show: true,
            text: '',
            left: '20',
            top: '10',
            textStyle: {
              fontSize: 18,
              fontFamily: 'Microsoft YaHei',
              color: 'rgba(162, 199, 255,1)'
            }
          },
          legend: {
            right: 0,
            top: 15,
            width: '70%'
          },
          // 待完善：此处如果注释会导致添加不上axisLabel->fontSize的chartFontSize，因为递归合并时直接赋值xAxis全局配置了
          xAxis: [
            {
              axisLabel: {
                formatter: function (value: string) {
                  const srt = value.split('-')
                  return srt[1] + '-' + srt[2]
                }
              }
            }
          ],
          yAxis: [
            {
              name: ['', ''],
              position: ['left', ''],
              splitLine: {
                show: false
              }
            }
          ],
          grid: {
            top: 80,
            bottom: 32
          },
          // backgroundColor: '#082f7e',
          dataZoom: [
            {
              show: true,
              type: 'slider',
              start: 0,
              end: 100,
              width: '80%',
              height: 15,
              left: '10%',
              bottom: '13',
              borderColor: '#166beb',
              handleStyle: {
                color: '#166beb',
                borderColor: '#166beb',
                borderWidth: 4
              },
              moveHandleSize: 10,
              moveHandleStyle: {
                color: '#166beb'
              },
              textStyle: {
                color: '#00c6ff'
              },
              emphasis: {
                handleStyle: {
                  color: '#00c6ff',
                  borderColor: '#00c6ff',
                  borderWidth: 4
                },
                moveHandleStyle: {
                  color: '#00c6ff'
                }
              }
            }
          ],
          series: [
            {
              type: ['bar', 'bar', 'bar', 'bar', 'bar'],
              label: {
                show: false
              },
              symbolSize: 7, //折线点的大小
              smooth: true,
              connectNulls: true,
              itemStyle: {
                color: ['#5dec9d', '#ea68a2', '#1da7ff', '#ec6941', '#ffba0a']
              },
              areaStyle: {
                opacity: 0
              }
              // markPoint: {
              //   label: {
              //     show: true,
              //     color: '#fff'
              //   },
              //   data: [
              //     {
              //       type: 'max'
              //     },
              //     {
              //       type: 'min'
              //     },
              //     {
              //       type: 'average'
              //     }
              //   ]
              // }
            }
          ]
        },
        event: {
          // customEvent: (chartInstance: echarts.ECharts) => {
          //   chartInstance.group = 'group1'
          //   PieState.isGroup = true
          // }
        }
      },
      getData: (params) => {
        PieState.params.loading = true
        httpRequest
          .get({ url: 'M3P3SpdqDbPie', params })
          .then((res) => {
            if (res.code === 200 && Object.keys(res.map).length > 0) {
              PieState.params.map = res.map
              PieState.params.options.yAxis[0].min = res.min
              PieState.params.options.yAxis[0].name = [res.unit, '']
              PieState.params.options.dataset.dimensions = [
                'name',
                ...Object.keys(res.map)
              ]
              PieState.params.options.title.text = res.title
              PieState.params.options.dataset.source = res.data
              PieState.params.loading = false
            }
          })
          .catch(() => {
            console.log('请求失败')
          })
      }
    })
    // watch(
    //   () => [PieState.isGroup, BarState.isGroup],
    //   ([lineGroup, barGroup]) => {
    //     if (lineGroup && barGroup) {
    //       // 图表实例实现联动
    //       echarts.connect('group1')
    //     }
    //   }
    // )

    // watch(
    //   () => porps.params,
    //   (newVal, newOld) => {
    //     if (newVal.contrastType === '1') {
    //       BarState.getData(newVal)
    //     } else if (
    //       (newVal.contrastType != '1' && newOld.contrastType == '1') ||
    //       (newVal.contrastType != '1' && newOld.goodsId == newVal.goodsId)
    //     ) {
    //       PieState.getData(newVal)
    //     }
    //     lineState.getData(newVal)
    //   }
    // )
    watch(
      () => porps.params,
      (newVal, newOld) => {
        if (newVal.contrastType === '1') {
          BarState.getData(newVal)
        } else {
          PieState.getData(newVal)
        }
        lineState.getData(newVal)
      }
    )
    return {
      lineState,
      BarState,
      PieState
    }
  }
})
</script>
<style lang="less" scoped>
.nav {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: rgba(33, 122, 255, 0.1);

  .echart-item {
    width: 100%;
  }

  .box-line {
    height: 55.5%;
  }

  .box-bar,
  .box-pie {
    height: 44.5%;
  }

  .box-pie {
    position: relative;
    width: 100%;

    .line-chart {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}
</style>
